<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="register-container">
    <div class="register-box">
      <div class="register-header">
        <h2>注册账号</h2>
        <p>创建新账号，享受更多功能</p>
      </div>
      
      <!-- 使用原生表单替代Element Plus组件 -->
      <form class="register-form" @submit.prevent="handleRegister">
        <div class="form-item">
          <label>用户名</label>
          <input 
            v-model="registerForm.username" 
            placeholder="请输入用户名"
            required
            minlength="3"
            maxlength="20"
          />
        </div>
        
        <div class="form-item">
          <label>邮箱</label>
          <input 
            v-model="registerForm.email" 
            type="email"
            placeholder="请输入邮箱"
            required
          />
        </div>
        
        <div class="form-item">
          <label>手机号码</label>
          <input 
            v-model="registerForm.phone" 
            placeholder="请输入手机号码"
            required
            pattern="^1[3-9]\d{9}$"
          />
        </div>
        
        <div class="form-item">
          <label>密码</label>
          <input 
            v-model="registerForm.password" 
            type="password" 
            placeholder="请输入密码"
            required
            minlength="6"
          />
        </div>
        
        <div class="form-item">
          <label>确认密码</label>
          <input 
            v-model="registerForm.confirmPassword" 
            type="password" 
            placeholder="请再次输入密码"
            required
          />
        </div>
        
        <div class="form-item agreement">
          <label class="checkbox-label">
            <input type="checkbox" v-model="agreeTerms" />
            我已阅读并同意<a href="#" class="terms-link">服务条款</a>和<a href="#" class="terms-link">隐私政策</a>
          </label>
        </div>
        
        <button 
          type="submit" 
          class="register-button"
          :disabled="!agreeTerms || loading"
        >
          {{ loading ? '注册中...' : '注册' }}
        </button>
      </form>
      
      <div class="login-link">
        已有账号? <router-link to="/login">立即登录</router-link>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
import request from '@/utils/request'
// 移除不需要的导入
// import { ElMessage } from 'element-plus'
// import { userApi } from '../api'

// 路由
const router = useRouter()

// 注册表单数据
const registerForm = reactive({
  username: '',
  email: '',
  phone: '',
  password: '',
  confirmPassword: ''
})

// 表单验证
const formValid = computed(() => {
  // 用户名验证
  if (!registerForm.username || registerForm.username.length < 3) {
    return false;
  }
  
  // 邮箱验证
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!registerForm.email || !emailRegex.test(registerForm.email)) {
    return false;
  }
  
  // 手机号验证
  const phoneRegex = /^1[3-9]\d{9}$/;
  if (!registerForm.phone || !phoneRegex.test(registerForm.phone)) {
    return false;
  }
  
  // 密码验证
  if (!registerForm.password || registerForm.password.length < 6) {
    return false;
  }
  
  // 确认密码
  if (registerForm.password !== registerForm.confirmPassword) {
    return false;
  }
  
  return true;
})

// 同意条款
const agreeTerms = ref(false)

// 加载状态
const loading = ref(false)

// 注册处理
const handleRegister = async () => {
  if (!agreeTerms.value) {
    alert('请阅读并同意服务条款和隐私政策')
    return
  }
  
  if (!formValid.value) {
    alert('请正确填写所有必填信息');
    return;
  }
  
  loading.value = true
  
  try {
    // 调用注册API
    const res = await request.post('/user/register', {
      username: registerForm.username,
      email: registerForm.email,
      phone: registerForm.phone,
      password: registerForm.password
    });

    if (res.data.code === '200') {
    
      // 注册成功
      alert(res.message || '注册成功，请登录');
      
      // 重定向到登录页
      router.push('/login');
    }else if (res.data.code === '600') {
        alert('该用户已注册')
    }

  } catch (error) {
    // 如果是API错误响应
    if (error.response) {
      alert(error.response.data.message || '注册失败，请稍后再试');
    } else {
      // 如果是其他错误（如网络问题）
      alert('注册失败，请检查网络连接');
      console.error('注册错误:', error);
      
      // 开发环境下模拟注册成功
      if (process.env.NODE_ENV === 'development') {
        alert('模拟注册成功，请登录');
        router.push('/login');
      }
    }
  } finally {
    loading.value = false;
  }
}
</script>

<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 200px);
  padding: 2rem;
}

.register-box {
  width: 100%;
  max-width: 500px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 2rem;
}

.register-header {
  text-align: center;
  margin-bottom: 2rem;
}

.register-header h2 {
  font-size: 1.8rem;
  color: #333;
  margin-bottom: 0.5rem;
}

.register-header p {
  color: #666;
}

.register-form {
  margin-bottom: 1.5rem;
}

.form-item {
  margin-bottom: 1.5rem;
}

.form-item label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #333;
}

.form-item input {
  width: 100%;
  height: 40px;
  padding: 0 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  transition: border-color 0.2s;
  font-size: 14px;
  box-sizing: border-box;
}

.form-item input:focus {
  border-color: #409eff;
  outline: none;
}

.checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: auto;
  height: auto;
  margin-right: 8px;
}

.register-button {
  width: 100%;
  margin-top: 1rem;
  height: 45px;
  background-color: #409eff;
  border: none;
  border-radius: 4px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.register-button:hover {
  background-color: #66b1ff;
}

.register-button:disabled {
  background-color: #a0cfff;
  cursor: not-allowed;
}

.terms-link {
  color: #409eff;
  text-decoration: none;
}

.login-link {
  margin-top: 1.5rem;
  text-align: center;
  color: #666;
}

.login-link a {
  color: #409eff;
  text-decoration: none;
}

.agreement {
  margin-top: 1rem;
}
</style>